<script setup>
import { ref } from 'vue'

import { fnaghumen, shuiku, rightOneConfig, protectiveDoor, compentsKey } from '../pages/home/index'
import rftitle from './rftitle.vue'
import scrollboard from './scrollboard.vue'
import leShuibowen from './le-shuibowen.vue'




</script>

<template>
  <div class="flex flex-col">

    <rftitle class="mb-[30px]" title="防护门状态"></rftitle>
    <div :class="item.className" class="min-h-[80px] w-full pl-[66px] pr-[26px] mb-[17px] pb-[8px] relative"
      v-for="(item, index) in protectiveDoor" :key="index">
      <div class="absolute left-0 top-0 ">
        <img v-if="item.type == 2" class="w-[50px] h-[50px] around_rotate" src="../assets/three/red.png" alt="">
        <img v-else class="w-[50px] h-[50px] around_rotate" src="../assets/three/blue.png" alt="">
      </div>
      <div class="flex text-[16px]  pt-[18px] mb-[20px]">
        <div class=" text-white flex-1">{{ item.name }}</div>
        <div v-if="item.type == 2" class="text-red-400">打开</div>
        <div v-else class="text-green-400">关闭</div>
      </div>
      <div class="text-[14px] text-white mb-[8px]" v-for="(i, n) in item.data" :key="n">
        <span style="color: #B2E5FF;" class="mr-[8px]"> {{ i.name }}</span>{{ i.value }}
      </div>
    </div>




    <rftitle class="mt-[26px] mb-[24px]" title="水库水位状态"></rftitle>
    <div class="flex flex-wrap gap-[24px]">
      <div class="flex pb-[8px] w-[46%]" v-for="(item, index) in  shuiku " :key="index">
        <div class="w-[48px] h-[48px] mr-[8px]">
          <!-- <img class="w-[48px] h-[48px]" :src="item.status == 1 ? shui1 : shui2" alt=""> -->
          <leShuibowen :completion="item.status == '正常' ? '60%' : item.status == '上限报警' ? '90%' : '10%'"
            :water="item.status == '正常' ? '#0494df' : '#ff4748'">
          </leShuibowen>
        </div>
        <div class="text-[16px] text-white">
          <div style="color:#00AAFF;" class="leading-[24px] mb-[5px]">{{ item.name }}</div>
          <div class="text-[14px]">水位高度:{{ item.height }}m </div>
          <div class="leading-[24px] text-[14px]">水位状态:
            <span v-if="item.status == '正常'" style="color: #80FF80;">{{ item.status }}</span>
            <span v-else style="color: #FF8080;">{{ item.status }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class=" mt-[24px] h-[240px]">
      <scrollboard title="传感器参数" :config="rightOneConfig" :key="compentsKey"></scrollboard>
    </div>

  </div>

</template>

<style scoped>
.red_bg1 {
  background-image: url(../assets/one/men1.png);
  background-size: 100% 100%;
}

.blue_bg1 {
  background-image: url(../assets/one/men2.png);
  background-size: 100% 100%;
}
</style>
